import React, { Component } from 'react'
import { Text, StyleSheet, View,TouchableOpacity,Image } from 'react-native'
import type { Props} from '../../types/user'

// type Data = {
//   id:number,
//   source:any,
//   text:string,
//   width:number | 21,
//   height:number | 21
// }
// type Props = {
//   title:string,
//   rightTitle?:string,
//   rightFn?:()=> void,
//   data:Data[]
//  }
export default class MyCenterCom extends Component<Props> {
  constructor(props: Props){
    super(props)
  }
  clickFn = (row:any)=>{
    console.log(row)
  }
  
  render() {
    const {title,rightTitle,rightFn,data} = this.props
    const rightView =()=> {
      if(rightTitle && rightFn){
        return (
        <TouchableOpacity onPress={()=>(rightFn)}>
          <Text >{rightTitle} {'>'}</Text>
        </TouchableOpacity>
      )
      }
      return null
    }
    return (
      <View style={{backgroundColor:'white',borderRadius:10,marginTop:10,padding:10}}>
        <View style={{flexDirection:'row',borderBottomColor:'#f5f5f5',borderBottomWidth:1}}>
          <Text style={{color:'#666',marginBottom:12}}>{title}</Text>
          {rightView()}
        </View>
        <View style={{flexDirection:'row',flexWrap:'wrap',alignItems:'baseline'}}>
          {data.map(item =>(
            <TouchableOpacity key={item.id} style={styles.orderIcon} onPress={()=>this.clickFn(item)}>
              <Image style={{width:item.width ?? 21,height:item.height ?? 21}} resizeMethod='resize' source={(item.source)}/>
              <Text style={{marginTop:12,fontSize:12}}>{item.text}</Text>
            </TouchableOpacity>
          ))}
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  orderIcon:{
    alignItems:'center',
    marginTop:18,
    width:'20%'
  }
})
